<template>
  <div class="app-container">
        <div style="text-align: center;margin-bottom: 30px">
          防火区域-《{{regionInfo.buildName}}》-详情信息
        </div>
        <div style="width: 50%;margin:0px auto;vertical-align:middle;height:100%">
        <el-form :model="regionInfo" ref="regionInfo"  label-width="100px">
            <el-form-item label="所属建筑"  prop="buildName">
              {{regionInfo.buildName}}
            </el-form-item>
            <el-form-item label="所在楼层 " prop="floor">
              {{regionInfo.floor }}
            </el-form-item>
            <el-form-item label="区域面积" prop="area">
              {{regionInfo.area |square}}
            </el-form-item>
            <el-form-item label="防火区域描述" prop="remark">
              {{regionInfo.remark}}
            </el-form-item>
            <el-form-item label="详细位置" prop="address">
              {{regionInfo.address}}
            </el-form-item>
        </el-form>
      </div>
      <div>
        <uc-table url="admin/equipment/getEquipmentPage" name="设备" ref="equipmentTable" pageable table-border :search-form="searchForm">
          <template slot="searchForm">

          </template>
          <template slot="columns">
          <el-table-column prop="isMaintenance" label="是否维保中" align="center">
            <template slot-scope="scope">
              {{scope.row.isMaintenance?"是":"否"}}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="设备名称" align="left"></el-table-column>
          <el-table-column prop="type" label="设备类型" align="left">
            <template slot-scope="scope">
              {{scope.row.type | equipmentType}}
            </template>
          </el-table-column>
          <el-table-column prop="manufactor" label="设备厂家" align="left"></el-table-column>
          <el-table-column prop="enterpriseName" label="企业名称" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="buildName" label="建筑名称" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="操作" width="240" align="left" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <!--编辑按钮-->
              <el-button size="mini" icon="el-icon-info" type="success" @click="handleInfo(scope.row)">详情</el-button>
            </template>
          </el-table-column>
          </template>
        </uc-table>
      </div>
  </div>
</template>

<script>
import {getInFireproofRegionVo} from "@/api/fireproofRegion";
import UcTable from "@/components/UcTable/index.vue";

export default {
  name: "info",
  components: {UcTable},
  data(){
    return{
      regionInfo:{},
      searchForm:{
        deleted:false,
        fireproofRegionId:this.$route.params.ucId,
      },
    }
  },
  created() {
    let ucId= this.$route.params.ucId
    this.getRegionVo(ucId)
  },
  methods:{
    getRegionVo(val){
      getInFireproofRegionVo({ucId:val}).then(res=>{
        this.regionInfo = res.data
      }).catch(error=>{

      })
    },
    handleSearch(){
      this.$refs.equipmentTable.getTableData(1)
    },
    handleInfo(val){
      this.$router.push("/equipment/equipmentInfo/"+val.ucId)
    }
  }

}
</script>

<style scoped>

</style>